<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片剪裁</title>
    <link href="__CDN__/assets/css/frontend{$Think.config.app_debug?'':'.min'}.css?v={$Think.config.site.version}" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="__CDN__/assets/js/html5shiv.js"></script>
    <script src="__CDN__/assets/js/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="__ADDON__/css/cropper.css">
    <link rel="stylesheet" href="__ADDON__/css/main.css">
    <!--@formatter:off-->
    <style>
        .img-container {
            min-height: {$cropper.containerMinHeight|default=200}px;
            max-height: {$cropper.containerMaxHeight|default=400}px;
        }
    </style>
    <style data-render="darktheme">
        body.darktheme {
            background-color: #262626;
        }
    </style>
    <!--@formatter:on-->
</head>
<body style="padding:15px;">
<script>if (parent.document.body.classList.contains("darktheme")) {document.body.classList.add("darktheme");}</script>
<!--@formatter:off-->
<script type="text/javascript">
    var require = {
        config: {$jsconfig|json_encode}
    };
</script>
<!--@formatter:on-->

<!-- Content -->
<div class="">
    <div class="row">
        <div class="col-md-9 col-sm-9 col-xs-9">
            <!-- <h3>Demo:</h3> -->
            <div class="img-container">
                <img id="image" src="{$cropper.url|cdnurl|htmlentities}"/>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-xs-3" style="padding-left:0;">
            <!-- <h3>Preview:</h3> -->
            <div class="docs-preview clearfix">
                <div class="img-preview preview-lg"></div>
                <div class="img-preview preview-md"></div>
                <div class="img-preview preview-sm"></div>
                <div class="img-preview preview-xs"></div>
            </div>

            <!-- <h3>Data:</h3> -->
            <div class="docs-data">
                <div class="input-group">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataX">X</label>
                    </span>
                    <input type="text" class="form-control" id="dataX" placeholder="x" readonly>
                    <span class="input-group-addon">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataY">Y</label>
                    </span>
                    <input type="text" class="form-control" id="dataY" placeholder="y" readonly>
                    <span class="input-group-addon">
                      <span class="input-group-text">px</span>
                    </span>
                </div>

                {if $cropper.customWidthHeight && !$cropper.aspectRatio}
                <div class="input-group">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataWidth">宽度</label>
                    </span>
                    <input type="text" class="form-control" id="dataWidth" placeholder="width">
                    <span class="input-group-addon">
                      <span class="input-group-text">px</span>
                    </span>
                </div>

                <div class="input-group">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataHeight">高度</label>
                    </span>
                    <input type="text" class="form-control" id="dataHeight" placeholder="height">
                    <span class="input-group-addon">
                      <span class="input-group-text">px</span>
                    </span>
                </div>
                {/if}

                <div class="input-group">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataRotate">旋转</label>
                    </span>
                    <input type="text" class="form-control" id="dataRotate" placeholder="rotate" readonly>
                    <span class="input-group-addon">
                      <span class="input-group-text">deg</span>
                    </span>
                </div>
                <div class="input-group hidden">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataScaleX">水平方向翻转</label>
                    </span>
                    <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
                </div>
                <div class="input-group hidden">
                    <span class="input-group-addon">
                      <label class="input-group-text" for="dataScaleY">垂直方向翻转</label>
                    </span>
                    <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
                </div>
            </div>

            <div class="docs-toggles">
                {if $cropper.customAspectRatio && !$cropper.aspectRatio}
                <div class="btn-group d-flex flex-nowrap" data-toggle="buttons" style="margin-top:0px;">
                    <label class="btn btn-primary active">
                        <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 16 / 9">
                        16:9
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 4 / 3">
                      4:3
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 1 / 1">
                      1:1
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: 2 / 3">
                      2:3
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="比例: NaN">
                      Free
                    </span>
                    </label>
                </div>
                {/if}

                <div class="btn-group d-flex flex-nowrap" data-toggle="buttons">
                    <label class="btn btn-primary active">
                        <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked="">
                        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 0">
                      VM0
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1">
                        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 1">
                      VM1
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2">
                        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 2">
                      VM2
                    </span>
                    </label>
                    <label class="btn btn-primary">
                        <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3">
                        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="显示模示 3">
                      VM3
                    </span>
                    </label>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-9 col-sm-9 col-xs-9 docs-buttons">
            <!-- <h3>Toolbar:</h3> -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="移动">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="移动">
              <span class="fa fa-arrows"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="剪裁">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="剪裁">
              <span class="fa fa-crop"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="缩小">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="缩小">
              <span class="fa fa-search-plus"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="放大">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="放大">
              <span class="fa fa-search-minus"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="左移">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="左移">
              <span class="fa fa-arrow-left"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="右移">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="右移">
              <span class="fa fa-arrow-right"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="上移">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上移">
              <span class="fa fa-arrow-up"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="下移">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="下移">
              <span class="fa fa-arrow-down"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="向左翻转">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向左翻转">
              <span class="fa fa-rotate-left"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="向右翻转">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="向右翻转">
              <span class="fa fa-rotate-right"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="水平翻转">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="水平翻转">
              <span class="fa fa-arrows-h"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="垂直翻转">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="垂直翻转">
              <span class="fa fa-arrows-v"></span>
            </span>
                </button>
            </div>


            <div class="btn-group hidden">
                <button type="button" class="btn btn-primary" data-method="disable" title="禁用">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="禁用">
              <span class="fa fa-lock"></span>
            </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="enable" title="启用">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="启用">
              <span class="fa fa-unlock"></span>
            </span>
                </button>
            </div>

            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="reset" title="重置">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重置">
              <span class="fa fa-refresh"></span>
            </span>
                </button>
                <label class="btn btn-primary btn-upload" for="inputImage" title="上传图片">
                    <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重新上传图片">
              <span class="fa fa-upload"></span>
            </span>
                </label>

            </div>

            <div class="btn-group btn-group-crop">
                <button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="预览&下载">
                      预览&下载
                    </span>
                </button>
            </div>

            <!-- Show the cropped image in modal -->
            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="getCroppedCanvasTitle">已剪裁</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">下载图片</a>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal -->
        </div><!-- /.docs-buttons -->

        <div class="col-md-3 col-sm-3 col-xs-3" style="padding-left:0;">
            <div style="margin:0;">
                <div class="d-flex">
                    <button type="button" class="btn btn-success btn-submit btn-embossed mr-1">确定</button>
                    <button type="button" class="btn btn-default btn-cancel btn-embossed ml-1">取消</button>
                </div>
            </div>
        </div><!-- /.docs-toggles -->
    </div>
</div>

<script>
    require.callback = function () {
        define('cropper', ['jquery', 'bootstrap', 'frontend', 'template', '../addons/cropper/js/cropper'], function ($, undefined, Frontend, Template, undefined, Cropper) {
            var Controller = {
                cropper: function () {
                    $("[data-toggle='tooltip']").data("container", "body");
                    var URL = window.URL || window.webkitURL;
                    var $image = $('#image');
                    window.$image = $image;
                    var console = window.console || {
                        log: function () {
                        }
                    };

                    var $download = $('#download');
                    var $dataX = $('#dataX');
                    var $dataY = $('#dataY');
                    var $dataHeight = $('#dataHeight');
                    var $dataWidth = $('#dataWidth');
                    var $dataRotate = $('#dataRotate');
                    var $dataScaleX = $('#dataScaleX');
                    var $dataScaleY = $('#dataScaleY');
                    var options = {
                        aspectRatio: parseFloat("{$cropper.aspectRatio|default='NaN'}"),
                        preview: '.img-preview',
                        autoCropArea: parseFloat("{$cropper.autoCropArea|default='.8'}"),
                        cropBoxMovable: !!parseInt("{$cropper.cropBoxMovable|default='1'}"),
                        cropBoxResizable: !!parseInt("{$cropper.cropBoxResizable|default='1'}"),
                        minCropBoxWidth: parseInt("{$cropper.minCropBoxWidth|default='0'}"),
                        minCropBoxHeight: parseInt("{$cropper.minCropBoxHeight|default='0'}"),
                        minContainerWidth: parseInt("{$cropper.minContainerWidth|default='0'}"),
                        minContainerHeight: parseInt("{$cropper.minContainerHeight|default='0'}"),
                        minCanvasWidth: parseInt("{$cropper.minCanvasWidth|default='0'}"),
                        minCanvasHeight: parseInt("{$cropper.minCanvasHeight|default='0'}"),
                        crop: function (e) {
                            $dataX.val(Math.round(e.detail.x));
                            $dataY.val(Math.round(e.detail.y));
                            $dataHeight.val(Math.round(e.detail.height));
                            $dataWidth.val(Math.round(e.detail.width));
                            $dataRotate.val(e.detail.rotate);
                            $dataScaleX.val(e.detail.scaleX);
                            $dataScaleY.val(e.detail.scaleY);
                        }
                    };
                    var croppedOptions = {
                        minWidth: parseInt("{$cropper.croppedMinWidth|default='0'}"),
                        minHeight: parseInt("{$cropper.croppedMinHeight|default='0'}"),
                        maxWidth: parseInt("{$cropper.croppedMaxWidth|default='2048'}"),
                        maxHeight: parseInt("{$cropper.croppedMaxHeight|default='2048'}"),
                        fillColor: "{:$cropper.fillColor ? '#' . $cropper.fillColor : 'transparent'}",
                    };
                    if (parseInt("{$cropper.croppedMinWidth|default='0'}") > 0) {
                        croppedOptions.width = parseInt("{$cropper.croppedWidth}");
                    }
                    if (parseInt("{$cropper.croppedMinHeight|default='0'}") > 0) {
                        croppedOptions.height = parseInt("{$cropper.croppedHeight}");
                    }
                    var originalImageURL = $image.attr('src');
                    var uploadedImageName = 'cropped.jpg';
                    var uploadedImageType = 'image/jpeg';
                    var uploadedImageURL;

                    // 实例化
                    $image.cropper(options);

                    //确认事件
                    $(document).on("click", ".btn-submit", function () {
                        var data = $image.cropper('getData');
                        var dataURI = $image.cropper('getCroppedCanvas', croppedOptions).toDataURL('image/png');
                        data.dataURI = dataURI;
                        Fast.api.close(data);
                    });

                    //取消事件
                    $(document).on("click", ".btn-cancel", function () {
                        Fast.api.close();
                    });

                    // Buttons
                    if (!$.isFunction(document.createElement('canvas').getContext)) {
                        $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
                    }

                    if (typeof document.createElement('cropper').style.transition === 'undefined') {
                        $('button[data-method="rotate"]').prop('disabled', true);
                        $('button[data-method="scale"]').prop('disabled', true);
                    }

                    // $dataWidth,$dataHeight点击事件
                    $('#dataWidth,#dataHeight').change(function () {
                        const cropBoxData = $image.cropper('getCropBoxData');
                        const imageData = $image.cropper('getImageData');
                        const newHeight = imageData.height / imageData.naturalHeight * parseFloat($dataHeight.val());
                        const newWidth = imageData.width / imageData.naturalWidth * parseFloat($dataWidth.val());
                        const newCropBoxData = {
                            left: cropBoxData.left,
                            top: cropBoxData.top,
                            height: newHeight,
                            width: newWidth,
                        };

                        $image.cropper('setCropBoxData', newCropBoxData);
                    });

                    // Download
                    if (typeof $download[0].download === 'undefined') {
                        $download.addClass('disabled');
                    }

                    // Options
                    $('.docs-toggles').on('change', 'input', function () {
                        var $this = $(this);
                        var name = $this.attr('name');
                        var type = $this.prop('type');
                        var cropBoxData;
                        var canvasData;

                        if (!$image.data('cropper')) {
                            return;
                        }

                        if (type === 'checkbox') {
                            options[name] = $this.prop('checked');
                            cropBoxData = $image.cropper('getCropBoxData');
                            canvasData = $image.cropper('getCanvasData');

                            options.ready = function () {
                                $image.cropper('setCropBoxData', cropBoxData);
                                $image.cropper('setCanvasData', canvasData);
                            };
                        } else if (type === 'radio') {
                            options[name] = $this.val();
                        }
                        $image.cropper('destroy').cropper(options);
                    });

                    // Methods
                    $('.docs-buttons').on('click', '[data-method]', function () {
                        var $this = $(this);
                        var data = $this.data();
                        var cropper = $image.data('cropper');
                        var cropped;
                        var $target;
                        var result;

                        if ($this.prop('disabled') || $this.hasClass('disabled')) {
                            return;
                        }

                        if (cropper && data.method) {
                            data = $.extend({}, data); // Clone a new one
                            if (typeof data.target !== 'undefined') {
                                $target = $(data.target);
                                if (typeof data.option === 'undefined') {
                                    try {
                                        data.option = JSON.parse($target.val());
                                    } catch (e) {
                                        console.log(e.message);
                                    }
                                }
                            }

                            cropped = cropper.cropped;
                            switch (data.method) {
                                case 'rotate':
                                    if (cropped && options.viewMode > 0) {
                                        $image.cropper('clear');
                                    }
                                    break;

                                case 'getCroppedCanvas':
                                    if (uploadedImageType === 'image/jpeg') {
                                        if (!data.option) {
                                            data.option = {};
                                        }
                                        $.extend(data.option, croppedOptions);
                                        data.option.fillColor = '#fff';
                                    }
                                    break;
                            }
                            result = $image.cropper(data.method, data.option);
                            switch (data.method) {
                                case 'rotate':
                                    if (cropped && options.viewMode > 0) {
                                        $image.cropper('crop');
                                    }
                                    break;
                                case 'scaleX':
                                case 'scaleY':
                                    $(this).data('option', -data.option);
                                    break;

                                case 'getCroppedCanvas':
                                    if (result) {
                                        // Bootstrap's Modal
                                        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);

                                        if (!$download.hasClass('disabled')) {
                                            download.download = uploadedImageName;
                                            $download.attr('href', result.toDataURL(uploadedImageType));
                                        }
                                    }
                                    break;

                                case 'destroy':
                                    if (uploadedImageURL) {
                                        URL.revokeObjectURL(uploadedImageURL);
                                        uploadedImageURL = '';
                                        $image.attr('src', originalImageURL);
                                    }

                                    break;
                            }

                            if ($.isPlainObject(result) && $target) {
                                try {
                                    $target.val(JSON.stringify(result));
                                } catch (e) {
                                    console.log(e.message);
                                }
                            }
                        }
                    });

                    // 键盘支持
                    $(document.body).on('keydown', function (e) {
                        if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) {
                            return;
                        }
                        switch (e.which) {
                            case 37:
                                e.preventDefault();
                                $image.cropper('move', -1, 0);
                                break;
                            case 38:
                                e.preventDefault();
                                $image.cropper('move', 0, -1);
                                break;
                            case 39:
                                e.preventDefault();
                                $image.cropper('move', 1, 0);
                                break;
                            case 40:
                                e.preventDefault();
                                $image.cropper('move', 0, 1);
                                break;
                        }
                    });

                    // 上传图片
                    var $inputImage = $('#inputImage');

                    if (URL) {
                        $inputImage.change(function () {
                            var files = this.files;
                            var file;

                            if (!$image.data('cropper')) {
                                return;
                            }

                            if (files && files.length) {
                                file = files[0];

                                if (/^image\/\w+$/.test(file.type)) {
                                    uploadedImageName = file.name;
                                    uploadedImageType = file.type;

                                    if (uploadedImageURL) {
                                        URL.revokeObjectURL(uploadedImageURL);
                                    }

                                    uploadedImageURL = URL.createObjectURL(file);
                                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                                    $inputImage.val('');
                                } else {
                                    window.alert('请选择一张图片');
                                }
                            }
                        });
                    } else {
                        $inputImage.prop('disabled', true).parent().addClass('disabled');
                    }
                }
            };
            return Controller;
        });
    };
</script>

<script src="__CDN__/assets/js/require{$Think.config.app_debug?'':'.min'}.js" data-main="__CDN__/assets/js/require-frontend{$Think.config.app_debug?'':'.min'}.js?v={$site.version}"></script>

</body>
</html>
